<template>
  <div class="m-evaluate">
    <div class="m-evaluate-head"><img :src="data.headimgurl" alt=""> {{data.user_name}}</div>
    <em class="m-evaluate-time">{{data.create_time}}</em>
    <p class="m-evaluate-con">{{data.evaluation_content}}</p>
    <evaluation-con></evaluation-con>
    <div align="right">
      <button class="m-addevaluate" @click="toAddEvaluation(data.order_id,data.sourceFrom)">追加评价</button>
    </div>

    <div class="m-moreEvaluate">
      <em>追加评价</em>
      <p v-for="(item,index) in data.exlist" :key="index">{{item.evaluation_content}}</p>
    </div>
  </div>
</template>
<script>
  export default {
    name: '',
    props: ['data'],
    data() {
      return {

      }
    },
    methods: {

    },
    mounted() {
        console.log(this.data)
    },
    components: {
      evaluationCon: () => import('./myEvaluationitem_con'),
    },

  }

</script>
<style lang="less" scoped>
  .m-evaluate {
    background: white;
    padding: .8rem 0;

    .m-evaluate-head {
      padding-left: .8rem;
      margin-bottom: .4rem;

      img {
        width: 2rem;
        height: 2rem;
        .border-radius(100%);
        margin-right: .4rem;
      }
    }

    .m-evaluate-time {
      color: @light-gray;
      font-size: .8rem;
      padding-left: .8rem;
    }

    .m-evaluate-con {
      padding: .6rem .8rem;
    }

    .m-addevaluate {
      color: @primary-green;
      border: 1px solid @primary-green;
      .border-radius(20px);
      margin-top: .8rem;
      margin-right: .8rem;
      padding: 0 .8rem;
      height: 1.6rem;
    }

    .m-moreEvaluate {
      padding: .4rem .8rem 0;
      margin-top: .8rem;
      border-top: 1px solid @background-gray;

      em {
        font-size: .8rem;
        color: @primary-red;
      }

      p {
        margin-top: .4rem;
        color: @secondary-gray;
      }
    }
  }

</style>
